html {
  --main-color: #1446cc;
  --main-color-rgb: 20, 70, 204;
  --body-color: var(--bs-body-color);
  --bs-shadow: 0 0.0417rem 0.0833rem rgba(var(--bs-body-color-rgb), 0.15);
  --bs-shadow-active: 0 0.0208rem 0.0417rem rgba(var(--bs-body-color-rgb), 0.15);
  --xiaomi-shadow: 0 0.0781rem 0.1563rem rgba(0, 0, 0, 0.1);
  --xiaomi-shadow-active: 0 0.0391rem 0.0781rem rgba(0, 0, 0, 0.1);
  --transition-duration: 0.2s;
  --bs-nice-shadow: 0 0 0 0.0208rem rgba(var(--main-color-rgb), 0.25);
  overflow-x: hidden !important;
}
html body {
  font-size: 0.085rem;
}
html body #magicPointer {
  height: 0.125rem;
  width: 0.125rem;
  mix-blend-mode: difference;
  box-shadow: 0px 0px 15px -5px #fff;
  z-index: 9999;
}
html body #magicPointer.pointer-overlay {
  height: 0.2604rem;
  width: 0.2604rem;
}
html body .iconfont:hover {
  color: var(--main-color);
}
* {
  caret-color: var(--main-color) !important;
}
* ::selection {
  background-color: var(--main-color);
  color: #fff;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  padding: 0.06rem 0.15rem;
  height: 0.5rem;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  transition: all var(--transition-duration), top 0.7s ease-in-out;
}
.navbar.hide {
  top: -100%;
}
.navbar .iconfont {
  font-size: 0.15rem;
}
.navbar .iconfont:hover {
  color: #fff;
}
.navbar .navbar-brand img {
  height: 0.28rem;
}
.navbar .pharmacyBtn {
  margin-left: 0.35rem;
  display: flex;
  align-items: center;
}
.navbar .pharmacyBtn:hover {
  color: #fff;
}
.navbar .pharmacyBtn .location {
  display: flex;
  align-items: center;
  margin-left: 0.037rem;
}
.navbar .pharmacyBtn .location .pharmacy-text {
  font-size: 0.11rem;
}
.navbar .navbar-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.2rem;
}
.navbar .navbar-nav .nav-item {
  position: relative;
  transition: all var(--transition-duration);
}
.navbar .navbar-nav .nav-item a {
  padding: 0.07rem 0.08rem;
  font-size: 0.115rem;
}
.navbar .navbar-nav .nav-item a:hover,
.navbar .navbar-nav .nav-item a.active {
  color: #fff;
}
.navbar .navbar-nav .nav-item a:hover::after,
.navbar .navbar-nav .nav-item a.active::after {
  position: absolute;
  left: 50%;
  bottom: -0.04rem;
  content: '';
  width: 35%;
  height: 0.015rem;
  border-radius: 1vh;
  background-color: #fff;
  transform: translateX(-50%);
}
.navbar .navbar-right {
  margin-left: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
}
.navbar .navbar-right form {
  display: flex;
  align-items: center;
}
.navbar .navbar-right form input {
  --main-color: #fff;
  width: 0;
  margin: 0;
  padding: 0.06rem 0;
  background-color: transparent;
  border: none;
  border-radius: 999rem;
  font-size: 0.1rem;
  transition: all var(--transition-duration);
}
.navbar .navbar-right form input:focus {
  margin-right: 0.05rem;
  padding: 0.06rem 0.11rem;
  width: auto;
  border: 0.0052rem solid var(--main-color);
  box-shadow: 0 0 0 0.0208rem rgba(255, 255, 255, 0.25);
}
.banner {
  position: relative;
  height: 100vh;
}
.banner .indicator {
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  justify-content: space-between;
  gap: 0.15rem;
}
.banner .indicator > div {
  height: 0.028rem;
  width: 0.9rem;
  background-color: #fff;
  opacity: 0.5;
  border-radius: 999rem;
}
.banner .indicator > div.active {
  opacity: 1;
}
.banner .imgBox {
  position: relative;
  margin: auto;
  width: 100%;
  height: 100%;
  animation: zoom linear forwards;
  animation-timeline: scroll();
  animation-range: 0vh 90vh;
  overflow: hidden;
}
@keyframes zoom {
  from {
    width: 100%;
  }
  to {
    width: 65%;
    border-radius: 0.3rem;
  }
}
.banner .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all var(--transition-duration);
}
.container {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.5rem auto 0.3rem;
  width: 6.4rem;
}
.container .header {
  display: flex;
  align-items: center;
  margin-bottom: 0.03rem;
  font-size: 1.1em;
}
.container .header a {
  margin-left: auto;
  transition: all var(--transition-duration);
}
.container .header a:hover {
  color: var(--main-color);
  transform: translateX(0.03rem);
}
.container .header a:active {
  transform: translateX(0.05rem);
}
.container .header a i {
  font-size: inherit;
}
.container .tools {
  animation: fadeIn linear forwards;
  animation-timeline: scroll();
  animation-range: 0.5rem 70vh;
}
.container .tools .row {
  display: flex;
  justify-content: space-between;
}
.container .tools .row .tool-item {
  --hover-color: var(--main-color);
  position: relative;
  width: 0.62rem;
  height: 0.7rem;
  padding: 0.05rem 0.1rem;
  border-radius: 0.03rem;
  background-color: #fff;
  transition: all var(--transition-duration);
  cursor: pointer;
}
.container .tools .row .tool-item.znwz {
  --hover-color: #2261c8;
}
.container .tools .row .tool-item.znwz img {
  transform: translateY(0.03rem);
}
.container .tools .row .tool-item.jkzx {
  --hover-color: #41b39d;
}
.container .tools .row .tool-item.jkzx img {
  transform: translateY(0.04rem);
}
.container .tools .row .tool-item.znpf {
  --hover-color: #ffb900;
}
.container .tools .row .tool-item.znpf img {
  transform: translateY(0.003rem);
}
.container .tools .row .tool-item.znsb {
  --hover-color: #ff4242;
}
.container .tools .row .tool-item.znsb img {
  transform: translateY(0.04rem);
}
.container .tools .row .tool-item.bad.yfjc {
  padding: 0.05rem 0.145rem;
}
.container .tools .row .tool-item.bad.yfjc img {
  transform: translateY(0.05rem);
}
.container .tools .row .tool-item.bad.jkzc {
  padding: 0.05rem 0.177rem;
}
.container .tools .row .tool-item.bad.jkzc img {
  transform: translateY(0.01rem);
}
.container .tools .row .tool-item.bad.smzs {
  padding: 0.05rem 0.12rem;
}
.container .tools .row .tool-item.bad.smzs img {
  transform: translateY(0.035rem);
}
.container .tools .row .tool-item.bad.jbdt {
  padding: 0.05rem 0.16rem;
}
.container .tools .row .tool-item.bad.jbdt img {
  transform: translateY(0.02rem);
}
.container .tools .row .tool-item:hover {
  transform: translateY(-0.02rem);
  box-shadow: var(--bs-shadow);
}
.container .tools .row .tool-item:hover p {
  color: var(--hover-color);
}
.container .tools .row .tool-item:active {
  transform: translateY(-0.005rem);
  box-shadow: var(--bs-shadow-active);
}
.container .tools .row .tool-item .tool-link img {
  width: 100%;
}
.container .tools .row .tool-item .tool-link p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.07rem;
  text-align: center;
  text-wrap: nowrap;
}
.container .appointment {
  animation: fadeIn linear forwards;
  animation-timeline: scroll();
  animation-range: 0.3rem 95vh;
}
.container .appointment .row {
  display: flex;
  justify-content: space-between;
}
.container .appointment .row .appointment-item {
  position: relative;
  box-shadow: var(--bs-shadow);
  border-radius: 0.09rem;
}
.container .appointment .row .appointment-item .appointment-link {
  color: #fff;
}
.container .appointment .row .appointment-item .appointment-link p,
.container .appointment .row .appointment-item .appointment-link a {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.container .appointment .row .appointment-item .appointment-link .title {
  top: 0.09rem;
  font-size: 1.8em;
  letter-spacing: 0.1em;
}
.container .appointment .row .appointment-item .appointment-link .description {
  top: 0.36rem;
  font-size: 1.1em;
}
.container .appointment .row .appointment-item .appointment-link img.bg {
  width: 1.7rem;
}
.container .appointment .row .appointment-item img.icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.7rem;
  cursor: pointer;
  transition: all var(--transition-duration);
}
.container .appointment .row .appointment-item img.icon:hover {
  transform: scale(1.05);
}
.container .appointment .row .appointment-item img.icon:active {
  transform: scale(1.02);
}
.container .appointment .row .appointment-item img.icon#xxyy-icon {
  height: 0.65rem;
}
.container .appointment .row .appointment-item .goto {
  position: absolute;
  bottom: -0.055rem;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 0.04rem 0.13rem;
  background-color: #97b3ff;
  border-radius: 999rem;
  color: #fff;
  transition: all var(--transition-duration);
}
.container .appointment .row .appointment-item .goto:hover {
  transform: translateY(-0.02rem) translateX(-50%);
  box-shadow: var(--bs-shadow);
}
.container .appointment .row .appointment-item .goto:active {
  transform: translateY(-0.005rem) translateX(-50%);
  box-shadow: var(--bs-shadow-active);
}
.container .appointment .row .appointment-item:first-child .goto {
  background: linear-gradient(to right, rgba(168, 240, 210, 0.42), #a8f0d2);
}
.container .recommend-doctor {
  animation: fadeIn linear forwards;
  animation-timeline: scroll();
  animation-range: 0.1rem 95vh;
}
.container .recommend-doctor .header {
  margin-bottom: 0.07rem;
}
.container .recommend-doctor .header p {
  font-size: 1.2em;
  font-weight: 300;
  letter-spacing: 0.09em;
}
.container .recommend-doctor .header p i {
  font-size: 0.95em;
  margin-left: 0.028rem;
}
.container .recommend-doctor .body ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0.2rem 0.35rem;
}
.container .recommend-doctor .body ul li .card {
  background-color: #fff;
  border-radius: 0.037rem;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-duration);
  box-shadow: var(--bs-shadow-active);
}
.container .recommend-doctor .body ul li .card .imgBox img {
  height: 1rem;
  width: 100%;
  object-fit: cover;
}
.container .recommend-doctor .body ul li .card .card-body {
  padding: 0.1rem;
}
.container .recommend-doctor .body ul li .card .card-body .card-title,
.container .recommend-doctor .body ul li .card .card-body .secondary-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .recommend-doctor .body ul li .card .card-body .card-title .name {
  font-size: 0.1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.container .recommend-doctor .body ul li .card .card-body .secondary-title {
  margin: 0.05rem 0;
}
.container .recommend-doctor .body ul li .card .card-body .secondary-title .score {
  width: 0.4rem;
}
.container .recommend-doctor .body ul li .card .card-body .secondary-title .visit-time span {
  margin-right: 0.015rem;
  color: #007AFF;
}
.container .recommend-doctor .body ul li .card .card-body .speciality {
  color: gray;
}
.container .recommend-doctor .body ul li .card .card-body .speciality::before {
  margin-right: 0.05rem;
  content: '擅长:';
  font-size: 1.05em;
  color: #000;
}
.container .recommend-doctor .body ul li .card:hover {
  transform: translateY(-0.02rem);
  box-shadow: var(--bs-shadow);
}
.container .recommend-doctor .body ul li .card:active {
  transform: translateY(-0.005rem);
  box-shadow: var(--bs-shadow-active);
}
.copyright {
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 0.11rem;
}
.copyright a {
  color: inherit;
  text-decoration: none;
}
.copyright a i {
  transition: color var(--transition-duration);
  font-size: inherit;
}
.copyright a:hover {
  text-decoration: underline;
}
.copyright a:hover i {
  color: #c71d23;
}
::-webkit-scrollbar {
  width: 0;
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}
* {
  cursor: none !important;
}
